<template>
    <div class="photo-info-container">
        <h4>{{photo.title}}</h4>
        <div class="sub-title">
            <span>Publish At: {{photo.add_time}}</span>
            <span>Hits:{{photo.click}}</span>
        </div>
<!--        缩略图预览-->
<!--        cnpm i vue-preview -S-->
        <div class="thumbs">
            <vue-preview :slides="pics" @close="handleClose"></vue-preview>

        </div>
        <div class="clear"></div>
        <hr>
<!--        含有html标签，使用v-html-->
        <div class="content" v-html="photo.content">

        </div>
        <comment-box></comment-box>
    </div>
</template>

<script>
    import Comment from '../common/Comment.vue'
    import { Toast } from 'mint-ui';
    export default {
        data:function () {
            return {
                photo:[],
                pics:[]
            }
        },
        created:function(){
            this.getPhotoInfo()
        },
        methods:{
            getPhotoInfo(){
                this.$http.get('/photo-info/').then(res => {
                    if (res.body.code == 200){
                        this.photo = res.body.data;
                        this.pics = this.photo.img;
                        console.log(this.photo)
                    }
                    else {
                        Toast(res.body.message)
                    }
                })
            },
            handleClose () {
                console.log('close event')
            }
        },
        components:{
            'comment-box':Comment
        }
    }
</script>

<style lang="less" >
.photo-info-container{
    padding:3px;
    h4{
        color:blue;
        font-size: 15px;
        text-align: center;
        margin:15px 0;
    }
    .sub-title{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color:#ccc;
    }
    .content{
        font-size: 13px;
        line-height: 30px;
    }
    .thumbs{
        figure{
            margin: 0 ;
            padding: 10px;
            float: left;
        }
    }
    .clear{
        clear: both;
    }
}
</style>